<template>
    <div id="PhotoMore">
        <TopBar :searchOrNot="false"></TopBar>
        <div id="title">
             - {{ $route.query.name }} - 
        </div>
        <div id="photoContent">
            <div class="photoItem" v-for="item in photoData" :key="item.id" :class="phoneModelClass">
                <el-image :src="item.imgUrl" fit="cover" v-if="!item.authority || login"
                    :title="item.text" lazy :preview-src-list="photoImUrl">
                    <div slot="error" class="image-slot">
                        <i class="el-icon-picture-outline"></i>
                    </div>
                </el-image>
                <div v-else class="privatePhoto">
                    <span class="authorityIcon"></span>
                    <p class="authorityTips">该图片为私有图片</p>
                </div>
                <p class="text" v-if="!item.authority">{{ item.text }}</p>
                <p class="time" v-if="!item.authority">{{ item.time }}</p>
            </div>
        </div>
        <NotMore></NotMore>
        <toTop></toTop>
        <div>

        </div>
    </div>
</template>

<script>
import TopBar from '@/components/reusable/TopBar.vue'
import toTop from '@/components/reusable/toTop.vue'
import NotMore from '@/components/reusable/NotMore.vue';
export default {
    components: {
        TopBar , toTop , NotMore
    },
    data() {
        return {
            photoData: [], // 相片数据
            photoImUrl: [], // 相片url
            login: false, // 是否登录状态量
            phoneModelClass: '', // 图片展示样式
        }
    },
    methods: {
        // 获取相片数据
        getPhotoData() {
            this.$axios({
                method: 'post',
                url: '/album/getPhotoById/' + this.$route.query.id
            }).then(res => {
                res.data.forEach(element => {
                    element.time = element.time.slice(0,10)
                    element.imgUrl = this.GLOBAL.OSSImageUrlRoot + 'PhotoAlbum/' + element.id + '.png'
                    this.photoImUrl.push(element.imgUrl)
                });
                this.photoData = res.data
            })
        },
        // 查看是否登录
        checkLogin() {
            let data = new FormData()
            data.append("token", sessionStorage.getItem("token"))
            this.$axios({
                method: 'post',
                data: data,
                url: '/admin/checkToken',
                headers: {
                    'Content-Type': 'application/x-www-form-urlcoded'
                }
            }).then(res => {
                if (res.data) {
                    this.login = true
                } else {
                    this.login = false
                }
            })
        },
        // 手机端自适应
        phoneModel() {
            if( document.body.clientWidth < 1000) {
                this.phoneModelClass = 'whole'
                return
            }
            if (document.body.clientWidth < 1900) {
                this.phoneModelClass = 'half'
                return
            }
        }
    },
    mounted() {
        this.getPhotoData()
        this.checkLogin()
        this.phoneModel()
    }
}
</script>
<style lang="scss" scoped>
#PhotoMore {
    position: relative;
}
#photoContent {
    display: flex;
    flex-flow: wrap;
}

#title {
    margin: 50px 0 15px 0;
    text-align: center;
    font-size: $font-size-large;
    font-weight: $font-weight-medium;
    text-shadow: $color-main-text 1px 0 0, $color-main-text 0 1px 0, $color-main-text -1px 0 0, $color-main-text 0 -1px 0;
    color: $color-background;
    transition: all .5s;
}
.whole {
    width: 100% !important;
}
.half {
    width: 50% !important;
}
.photoItem {
    width: 25%;
    height: calc(40vh - 2em);
    overflow: hidden;
    position: relative;
}

.el-image {
    width: 100%;
    height: 100%;
}
.text, .time {
    position: absolute;
    transition: all .5s;
    opacity: 0;
    color: $color-main-text;
}
.privatePhoto {
    cursor: pointer;
    height: 100%;
    width: 100%;
}
.authorityIcon {
    font-size: calc(40vh - 10em);
    text-align: center;
    margin: 0 auto;
    display: block;
}
.authorityTips {
    margin-top: 2em;
    text-align: center;
    font-size: $font-size-medium;
}
.text {
    bottom: 20px;
    left: 30px;
}
.time {
    top: 20px;
    right: 30px;
}
.photoItem:hover .text,.photoItem:hover .time {
    opacity: 1;
}

</style>